<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M810.667 906.667h-640A117.547 117.547 0 0 1 53.333 789.333V234.667a117.547 117.547 0 0 1 117.334-117.334h640A117.547 117.547 0 0 1 928 234.667V320a32 32 0 1 1-64 0v-85.333a53.333 53.333 0 0 0-53.333-53.334h-640a53.333 53.333 0 0 0-53.334 53.334v554.666a53.333 53.333 0 0 0 53.334 53.334h640A53.333 53.333 0 0 0 864 789.333V704a32 32 0 0 1 64 0v85.333a117.547 117.547 0 0 1-117.333 117.334z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3Cpath d='M917.333 448v128H618.667V448h298.666m21.334-64H597.333a42.667 42.667 0 0 0-42.666 42.667v170.666A42.667 42.667 0 0 0 597.333 640h341.334a42.667 42.667 0 0 0 42.666-42.667V426.667A42.667 42.667 0 0 0 938.667 384z' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(51,51,51)'}' /%3E%3Cpath d='M672 512a32 32 0 1 0 64 0 32 32 0 1 0-64 0z' fill='${(isStr.value ? colors.value : colors.value[2]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
